<template>
	<view class="wrap">
    <u-toast ref="uToast" />
    <view v-for="(item, index) in list" :key="index"  class="rentHouse-list">
      <view class="item u-flex u-col-center u-row-bettwen">
        <view class="u-flex u-col-center u-row-bettwen u-flex-1" @click="link(1, item.house_sn)">
          <!-- <u-image :showLoading="true" :src="http+item.picList[0].image" class="img"></u-image> -->
          <image :src="http+item.picList[0].image" style="width: 200rpx; height:198rpx ;" class="img" mode="aspectFill"></image>
          <view class="div u-flex-1">
            <view class="name text-row-2">{{item.house_title}}</view>
            <view class="lab">{{item.house_decoration_name}}</view>
            <view class="price1">{{item.house_rent}}元/月</view>
          </view>
        </view>
        <view class="btns">
          <!-- 0-全部，1-自己的 -->
          <view v-if="item.status == '0' && item.is_self == 1" @click="link(2, item.house_sn)" style="margin-bottom: 20rpx;">
            <u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
            <text class="u-m-l-6" style="color:#2979ff">编辑</text>
          </view>
          <view @click="link(3, item.house_sn)" style="margin-bottom: 20rpx;">
            <u-icon name="tags" color="#2979ff" size="28"></u-icon>
            <text class="u-m-l-6" style="color:#2979ff">跟进</text>
          </view>
          <view v-if="item.status == '0' && item.is_self == 1" @click="link(4, item.house_sn)">
            <u-icon name="minus-circle" color="#e70000" size="28"></u-icon>
            <text class="u-m-l-6" style="color:#e70000">删除</text>
          </view>
          
        </view>
      </view>
    </view>
    <navigator class="addbtn" url="/rentHouse/fabu">
      <view class="line line1"></view>
      <view class="line line2"></view>
    </navigator>
  </view>
</template>
<style lang="scss" scoped>
  .addbtn{position: fixed; width: 60rpx; height: 60rpx; border-radius: 50%; border: 1px solid #2A70F9; z-index: 999; right: 20rpx; bottom:100rpx; background-color: #fff;
    .line{background-color: #2A70F9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
    .line1{width: 60%; height: 4rpx;}
    .line2{height: 60%; width: 4rpx;}
  }
  .wrap{background-color: #fff;}
  .pup{
    .shaixuan{
      box-shadow: 0 1px 4px #ededed; position: relative; z-index: 5;
      .item.on{color: #2A70F9;}
    }
    .prcie-box{
      padding: 30rpx;
      .item{
        display: flex; align-items: center; height: 82rpx; color: #666; font-size: 30rpx;
        &.on{color: #2A70F9;}
      }
    }
    .area-box{
      align-items: stretch;
      .left{
        width: 180rpx; background-color: #F5F7FB;
        .item{
          height: 82rpx; position: relative; padding-left: 30rpx; color: #666; font-size: 30rpx;
          &.on{
            color: #2A70F9; background-color: #fff;
            &::after{content: ''; display: block; width: 4rpx; background-color: #2A70F9; height: 52rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
          }
        }
      }
      .right{
        width: 100%; flex: 1; background-color: #fff;
        .item{
          height: 82rpx; display: flex; align-items: center; padding: 0 20rpx;color: #666; font-size: 30rpx;
          &.on{color: #151515;}
        }
      }
      .right,.left{max-height: calc(100vh - 300rpx); overflow-y: auto;}
    }
  }
  
  .ban{position: relative; z-index: 1;}
  .search-box{
    padding: 30rpx; margin-top: -30rpx; position: relative; z-index: 4; border-radius: 10rpx 10rpx 0 0; background-color: #fff; padding-bottom: 10rpx;
  }
  .search{
    background-color: #F3F2F7; border-radius: 40rpx;
    height: 80rpx; background-color: #F3F2F7;
    .keywords{flex: 1; width: 100%;}
  }
  .shaixuan{
    padding: 0 30rpx; background-color: #fff;
    .item{height: 94rpx;}
  }
</style>
<script>
	export default {
		data() {
			return {
        isAll:2, // 0-全部，1-自己的
        keywords:'', // 搜索条件
        showShaix:false, // 筛选框
        shaix_type:0,
        navH:'',
        shaixuanList:[{id:1, name:'区域'}, {id:2, name:'价格'}, {id:3, name:'面积'}, {id:4, name:'装修'}, {id:5, name:'排序'}, {id:6, name:'朝向'}],
        areaList:[
          {id:1, name:'全部'}, 
          {id:2, name:'包河'}, 
          {id:3, name:'滨湖'}, 
          {id:4, name:'装修'}
        ],
        areaList2:[
          {id:1, name:'全部'}, 
          {id:2, name:'百脑汇'}, 
          {id:3, name:'包河工业区'}, 
          {id:4, name:'巢湖路'},
          {id:5, name:'火车站'},
          {id:6, name:'明珠广场'},
          {id:7, name:'高铁南站'},
        ],
        priceList:[
          {id:1, name:'不限'}, 
          {id:2, name:'500/月以下'}, 
          {id:3, name:'500-1000/月'}, 
          {id:4, name:'1000-1500/月'},
          {id:5, name:'1500-2000元/月'},
          {id:6, name:'2000-2500元/月'},
          {id:7, name:'2500-3000元/月'}
        ],
        zhuangxiuList:[
          {id:1, name:'不限'}, 
          {id:2, name:'毛坯'}, 
          {id:3, name:'简装'}, 
          {id:4, name:'精装'},
          {id:5, name:'豪华装修'},
        ],
        mianjiList:[
          {id:1, name:'不限'}, 
          {id:2, name:'100㎡以下'}, 
          {id:3, name:'100-200㎡'}, 
          {id:4, name:'200-300㎡'},
        ],
        paixuList:[
          {id:1, name:'综合排序'}, 
          {id:2, name:'最新发布'}, 
          {id:3, name:'价格（从低到高）'}, 
          {id:4, name:'价格（从高到低）'},
          {id:5, name:'面积（从小到达）'},
          {id:6, name:'面积（从大到小）'},
        ],
        towardList:[],
        areaId:1,
        areaId2:1,
        priceId:1,
        zhuangxiuId:1,
        mianjiId:1,
        paixuId:1,
        list: [
          
        ],
        page:1,
        http:'',
        total:0,
        
			}
		},
    onLoad(options){
      this.isAll = options.type;
      console.log('options-------', options.type)
      this.list = []
      this.getList();
      this.http = this.$api.httpUrlApi();
      const title = options.type == 0 ? '所有房源' : '我发布的房源'
      uni.setNavigationBarTitle({
        title:title
      })
    },
    onShow(){
      
    },
    watch: {
      
    },
    
		methods: {
      // 1-详情, 2-编辑
      link(e, id){
        if(e == 1){
          uni.navigateTo({
            url:'/rentHouse/detail?type=1&id='+id
          })
        }else if(e == 2){
          uni.navigateTo({
            url:'/rentHouse/fabu?id='+id
          })
        }else if(e == 3){
          uni.navigateTo({
            url:'/rentHouse/follow?id='+id
          })
        }else if(e == 4){
          uni.showModal({
            title:"确定删除该房源！",
            success: (res) => {
              if(res.confirm){
               this.$api.deleteHousingResourcesApi({house_sn: id}).then(res=>{
                 if(res.code === 1){
                   this.list = this.list.filter(n=>n.house_sn != id)
                 }else{
                  this.$refs.uToast.show({
                    title: res.msg,
                  })
                 }
               })
              }
            }
          })
          
        }
      },
      getOtherId(e, name){
        this[name] = e;
        if(name != 'areaId'){
          this.showShaix = false;
        }else{
          this.areaId2 = ''
        }
        getList()
      },
      // 筛选开光
      getShaix(e){
        if(this.shaix_type == e){
          this.shaix_type = '';
          this.showShaix = false;
        }else{
          this.shaix_type = e;
          this.showShaix = true;
        }
        
      },
      // 获取列表
      getList(){
        this.$api.getHousingResourcesListApi({page:this.page, isAll: this.isAll}).then(res=>{
          if(res.code === 1){
            this.list = this.list.concat(res.data.data);
            this.total = res.data.total;
            if(this.list.length < res.data.total){
              this.page++
            }
          }
        })
      },
		},
    onShareAppMessage() {
      // return {
      //   title: '',
      //   path: '/pages/index/index',
      // }
    },
    onReachBottom() {
      if(this.page > 1 && this.list.length > this.total){
        this.getList()
      }
    }
	}
</script>